<!-- <div class="tab-pane fade active show" id="pills-general" role="tabpanel" aria-labelledby="pills-general-tab"> -->
<div class="mb-3 row">
    <div class="mb-3 d-flex">
        <div class="col form-check form-switch">
            <input type="checkbox" ng-model="$ctrl.appSettings.MixConfigurations.IsCache" id="IsCache"
                class="form-check-input ng-pristine ng-untouched ng-valid ng-empty" />
            <label class="custom-control-label mb-0" for="IsCache">Site data cache</label>
        </div>
        <div class="w-1">
            <a href="" ng-click="$ctrl.clearCache()" class="btn btn-primary">
                Clear Cache
            </a>
        </div>
    </div>
    <div class="mb-3">
        <label class="form-label">Cache Mode</label>
        <div class="form-check form-switch custom-control-inline col-3"
            ng-repeat="type in $ctrl.cacheModes track by $index"
            ng-class="{active: type === $ctrl.appSettings.MixConfigurations.MixCacheMode}"
            ng-click="$ctrl.appSettings.MixConfigurations.MixCacheMode=type;">
            <input type="radio" ng-model="$ctrl.appSettings.MixConfigurations.MixCacheMode" class="form-check-input"
                ng-value="type" id="page_type_{{type}}" name="page_type_{{type}}" />
            <label class="custom-control-label" for="page_type_{{type}}" ng-click="$ctrl.model=type;">{{type}}</label>
        </div>
    </div>
    <div class="mb-3" ng-if="$ctrl.appSettings.MixConfigurations.MixCacheMode === 'Json'">
        <label class="form-label">Json Data Storage Path</label>
        <input type="text" ng-model="$ctrl.appSettings.MixConfigurations.JsonDataFolder" class="form-control" />
    </div>
    <div class="mb-3" ng-if="$ctrl.appSettings.MixConfigurations.MixCacheMode === 'Database'">
        <label class="form-label">Cache Database Provider</label>
        <div class="form-check form-switch custom-control-inline col-3"
            ng-repeat="type in $ctrl.databaseProviders track by $index"
            ng-class="{active: type === $ctrl.appSettings.MixConfigurations.MixCacheDbProvider}"
            ng-click="$ctrl.appSettings.MixConfigurations.MixCacheDbProvider=type;">
            <input type="radio" ng-model="$ctrl.appSettings.MixConfigurations.MixCacheDbProvider"
                class="form-check-input" ng-value="type" id="page_type_{{type}}" name="page_type_{{type}}" />
            <label class="custom-control-label" for="page_type_{{type}}" ng-click="$ctrl.model=type;">{{type}}</label>
        </div>
    </div>
    <div class="mb-3" ng-if="$ctrl.appSettings.MixConfigurations.MixCacheMode === 'Database'">
        <label class="form-label">Connection Strings for Cache</label>
        <textarea rows="5" class="form-control"
            ng-model="$ctrl.appSettings.MixConfigurations.MixCacheConnectionString"></textarea>
    </div>
    <div class="mb-3 row">
        <label class="form-label">Default crop image sizes (px)</label>
        <div class="col-2">
            <label class="form-label">XXS:</label>
            <input type="text" ng-model="$ctrl.appSettings.MixConfigurations.ImageSizes.XXS.width"
                class="form-control" />
        </div>
        <div class="col-2">
            <label class="form-label">XS:</label>
            <input type="text" ng-model="$ctrl.appSettings.MixConfigurations.ImageSizes.XS.width"
                class="form-control" />
        </div>
        <div class="col-2">
            <label class="form-label">S:</label>
            <input type="text" ng-model="$ctrl.appSettings.MixConfigurations.ImageSizes.S.width" class="form-control" />
        </div>
        <div class="col-2">
            <label class="form-label">M:</label>
            <input type="text" ng-model="$ctrl.appSettings.MixConfigurations.ImageSizes.M.width" class="form-control" />
        </div>
        <div class="col-2">
            <label class="form-label">L:</label>
            <input type="text" ng-model="$ctrl.appSettings.MixConfigurations.ImageSizes.L.width" class="form-control" />
        </div>
        <div class="col-2">
            <label class="form-label">XL:</label>
            <input type="text" ng-model="$ctrl.appSettings.MixConfigurations.ImageSizes.XL.width"
                class="form-control" />
        </div>
    </div>
</div>